<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
    <title>拖拽图片</title>
    <style type='text/css'>
        img {
            position: absolute;
        }
    </style>

    <script type='text/javascript'>
        window.onload = function () {

            movMeId = document.getElementById("ImgMov");
            movMeId.style.top = "80px";
            movMeId.style.left = "80px";
            movMeId.style.position = "absolute";

            document.onmousedown = coordinates;
            document.onmouseup = mouseup;

            function coordinates(e) {
                if (e == null) {
                    e = window.event;
                }
                var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;

                if (sender.id == "ImgMov") {
                    mouseover = true;
                    pleft = parseInt(movMeId.style.left);
                    ptop = parseInt(movMeId.style.top);
                    xcoor = e.clientX;
                    ycoor = e.clientY;
                    document.onmousemove = moveImage;
                    return false;
                } else {
                    return false;
                }
            }

            function moveImage(e) {
                if (e == null) {
                    e = window.event;
                }
                movMeId.style.left = pleft + e.clientX - xcoor + "px";
                movMeId.style.top = ptop + e.clientY - ycoor + "px";
                return false;
            }

            function mouseup(e) {
                document.onmousemove = null;
            }
        }
    </script>
</head>
<body>
<img id="ImgMov" src="http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only.png" width="64"
     height="64"/>

<p>Drag and drop around the image in this page.</p>
</body>
</html>
